<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>购物车</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../fonts/iconfont.css" />
		<link rel="stylesheet" href="../../css/style.css" />
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		[v-clock] {
			display: none;
		}
	</style>

	<body ontouchstart>
		<div id="cart" v-clock>
			<header class="ui-header">
				<a href="javascript:history.go(-1)" class="ui-icon hd-left">
					<span class="iconfont icon-back"></span>
				</a>
				<div class="ui-title">购物车<span v-show="manages">({{numbers}})</span></div>
				<a href="javascript:;" @click="manage" class="icon-text btn-save hd-right">管理</a>
			</header>
			<div class="ui-content">
				<div class="J_cartBuy">
					<div class="ui-cell ui-cart-cell" v-for="(item,index) in list" v-clock>
						<label class="check-label" :for="'check'+index" @click="checkds(index)">
                        <input type="checkbox" :id="'check'+index" name="checkboxs" v-model="item.checked" class="cart-input" />
                    </label>
						<div class="item-img">
							<a href=""><img :src="'../../images/'+item.subimage1Filename" /></a>
						</div>
						<div class="ui-cell__bd">
							<div class="item-title">
								<a href="">{{item.goodsTitle}}</a>
							</div>
							<div class="item-attr">
								<span>{{item.specifications}}</span>
							</div>
							<div class="item-foot justify">
								<div class="pay-price">
									￥<span class="o-t-price">{{item.unitPrice}}</span>
								</div>
								<div class="ui-count">
									<a class="ui-count__btn ui-count__decrease" v-on:click="minius(index)">-</a>
									<input class="ui-count__number" type="number" v-model.number="item.purchaseQuantity" />
									<a class="ui-count__btn ui-count__increase" v-on:click="add(index)">+</a>
								</div>
							</div>
						</div>
					</div>
					<div v-show="manages" class="ui-cell ui-cart-acbar">
						<label class="check-label">
                        <input type="checkbox" name="cart" class="cart-input" v-model="allChecked" />
                        <span>全选</span>
                    </label>
						<div class="ui-cell__bd">
							<!-- <div class="cart-pay">
                            合计:<span class="cart-pay-price">￥{{sum.toFixed(2)}}</span>
                        </div> -->
						</div>
						<a href="javascript:(0)" @click="deletes" class="ui-btn ui-btn-cartbuy">删除</a>
					</div>
					<div v-show="!manages" class="ui-cell ui-cart-acbar">
						<label class="check-label">
                        <input type="checkbox" name="cart" class="cart-input" v-model="allChecked" />
                        <span>全选</span>
                    </label>
						<div class="ui-cell__bd">
							<div class="cart-pay">
								合计:<span class="cart-pay-price">￥{{sum.toFixed(2)}}</span>
							</div>
						</div>
						<a href="javascript:(0)" class="ui-btn ui-btn-cartbuy">结算(<span class="cartNumber">{{checkNum}}</span>)</a>
					</div>
				</div>
			</div>

			<script>
				var cart; //Vue对象
				function createVue(list) {
					cart = new Vue({
						el: '#cart',
						data() {
							return {
								list: list,
								checkeds: new Array(list.length),
								manages: false,
								numbers: 0,
								allChecked: false
							}
						},
						computed: {
							sum: function() {
								let sum = 0;
								for(let i in this.list) {
									if(this.list[i].checked)
										sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
								}
								return sum;
							},
							checkNum: function() {
								let num = 0;
								for(let i in this.list) {
									if(this.list[i].checked) {
										num++;
									}
								}
								return num;
							}
						},
						methods: {
							del: function(index) {
								this.list.splice(index, 1);
								this.checkeds.splice(index, 1); //同时删除对应的选中状态标识
							},
							add: function(index) {
								this.list[index].purchaseQuantity++;
							},
							minius: function(index) {
								if(this.list[index].purchaseQuantity > 1) {
									this.list[index].purchaseQuantity--;
								}
							},
							checkAll: function() {
								if(allChecked) {
									for(let i = 0; i < this.list.length; i++) {
										Vue.set(this.list[i].checked, i, false);
									}
								} else {
									for(let i = 0; i < this.list.length; i++) {
										Vue.set(this.list[i].checked, i, true);
									}
								}

							},
							manage: function() {
								this.manages = !this.manages
								console.log(this.checkeds)

							},
							deletes: function() {
								var t = 0
								var lists = []
								for(let i = 0; i < this.list.length; i++) {
									if(!this.list[i].checked) {
										lists.push(
											this.list[i]
										)
									}
								}
								this.list = lists
								for(let i = 0; i < this.list.length; i++) {
									if(this.list[i].checked) {
										t++
									}
								}
								this.numbers = t;
							},
							checkds: function(e) {
								var t = 0
								this.list[e].checked = !this.list[e].checked
								for(let i = 0; i < this.list.length; i++) {
									if(this.list[i].checked) {
										t++
									}
								}
								if(t == this.list.length) {
									this.allChecked = true
								} else {
									this.allChecked = false
								}
								this.numbers = t;
							}
						}
					});
				}
				window.onload = function() {
					//请求后台代码   。。。。
					//请求成功后将获得的list赋值给cart的list
					let list = [{
							goodsTitle: "水润面膜补水保湿玻尿酸清洁收缩毛孔控油亮肤男女士学生贴", //商品名
							specifications: "大包", //商品规格
							unitPrice: "10", //商品单价
							subimage1Filename: "cart.jpg", //商品图片名
							purchaseQuantity: 1,
							checked: false
						},
						{
							goodsTitle: "百雀羚小雀幸静润补水保湿面膜女 海藻芦荟膜贴舒缓清爽补水弹润",
							specifications: "大包",
							unitPrice: "10",
							subimage1Filename: "cart.jpg",
							purchaseQuantity: 1,
							checked: false
						},
						{
							goodsTitle: "希罗官方正品面膜霜西罗v脸提拉紧致肌肤网红抖音同款",
							specifications: "20盒装",
							unitPrice: "10",
							subimage1Filename: "cart.jpg",
							purchaseQuantity: 1,
							checked: false
						}
					]
					createVue(list);
				}
			</script>
	</body>

</html>